<template>
  <div id="account">
    <span class="text">用户名：</span
    ><input type="text" v-model="account.username" readonly /><br /><br />
    <span class="text">用户密码：</span><span class="psw">修改密码</span
    ><br /><br />
    <span class="text">绑定手机：{{ account.telphone }}</span
    ><br /><br />
    <span class="text">绑定邮箱： {{ account.email }}</span
    ><br /><br />
    <span class="text">机构认证： {{ account.organization }}</span
    ><br />
    <button class="btn" id="btn">编辑账户</button>
    <button class="btn">退出登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: {
        username: "GeoTech_QingQian`s_Daddy",
        telphone: "15563312881",
        email: "916988290@qq.com",
        organization: "高分辨率对地观测系统山东省日照市数据与应用中心",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
#account {
  padding-top: 20px;
  .text {
    color: #7e7e7e;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    margin-left: 120px;
  }

  .psw {
    color: #7e7e7e;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: #9c1a1a;
    cursor: pointer;
  }

  input {
    background-color: #2b2b2b;
    outline-style: none;
    border: 1px solid #9c1a1a;
    height: 24px;
    width: 240px;
    color: #7e7e7e;
    margin-left: 15px;
  }

  .btn {
    background-color: #2b2b2b;
    border: 1px solid #9c1a1a;
    outline-style: none;
    height: 26px;
    width: 80px;
    color: #7e7e7e;
    margin-left: 10px;
    cursor: pointer;
    margin-top: 20px;
  }

  #btn {
    margin-left: 200px;
  }

  .btn:hover {
    background-color: #9c1a1a;
  }
}
</style>
